<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { CustomMouseMenu } from '@/plugins/directive/contextmenu';
import { props } from './logoperate';
defineOptions({ name: 'LogOperate' });
//如const props = defineProps({ name: { type:String, defaule:'' }})
defineProps(props);
const tableRef = ref(null);
const loading = ref(true);
const logOperates = ref(null);
const currentRow = ref(null);
const totalCount = ref(0);
const params = reactive({
  pageIndex: 1,
  pageSize: 20,
  // query: {
  //   userName: null,
  // },
});
const handleTableRowClick = row => {
  currentRow.value = row;
};

const query = async () => {
  loading.value = true;
  await window.$api.logoperate.query(params).then(res => {
    logOperates.value = res.data.list;
    params.pageIndex = res.data.pageIndex;
    params.pageSize = res.data.pageSize;
    totalCount.value = res.data.totalCount;
    loading.value = false;
  });
};
const getContextmenus = (id: Number, name: String) => {
  return {
    menus: [
      {
        label: '修改',
        icon: 'Edit',
        fn: () => {
          //edit(id, name);
        },
      },
      {
        label: '删除',
        icon: 'Delete',
        fn: () => {
          //remove(id, name);
        },
      },
    ],
  };
};
const showMouseMenu = (row, column, event) => {
  const ctx = CustomMouseMenu({
    el: event.currentTarget,
    mouse: event,
    ...getContextmenus(row.id, row.name),
  });
  ctx.show();
  currentRow.value = row;
  tableRef.value.setCurrentRow(row);
};
onMounted(() => {
  query();
});
</script>

<template>
  <windows-window :window="window">
    <el-table ref="tableRef" :data="logOperates" style="width: 100%" height="100%" highlight-current-row v-loading="loading" @row-contextmenu="showMouseMenu" @row-click="handleTableRowClick">
      <el-table-column type="index" width="80" label="序号" align="center" />
      <el-table-column prop="userName" label="用户名" align="center" minWidth="100"></el-table-column>
      <el-table-column prop="logOn" label="操作时间" align="center" minWidth="180"></el-table-column>
      <el-table-column prop="iP" label="IP地址" align="center" minWidth="100"></el-table-column>
      <el-table-column prop="city" label="客户端地点" align="center" minWidth="100"></el-table-column>
      <el-table-column prop="userAgent" label="客户端" align="center" minWidth="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="browser" label="浏览器" align="center" minWidth="200"></el-table-column>
      <el-table-column prop="os" label="操作系统" align="center" minWidth="100"></el-table-column>
      <el-table-column prop="elapsedMilliseconds" label="耗时（毫秒）" align="center" minWidth="150"></el-table-column>
      <el-table-column prop="isSuccess" label="是否成功" align="center" minWidth="100"></el-table-column>
      <el-table-column prop="apiName" label="接口名称" align="center" minWidth="200"></el-table-column>
      <el-table-column prop="apiUrl" label="接口地址" align="center" minWidth="200"></el-table-column>
      <el-table-column prop="apiMethod" label="接口提交方法" align="center" minWidth="120"></el-table-column>
      <el-table-column prop="request" label="请求数据" align="center" minWidth="100" show-overflow-tooltip></el-table-column>
      <el-table-column prop="response" label="返回数据" align="center" minWidth="100" show-overflow-tooltip></el-table-column>
    </el-table>
    <template #pagination>
      <el-pagination
        v-model:currentPage="params.pageIndex"
        v-model:page-size="params.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        small="small"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="query"
        @current-change="query"
        @prev-click="query"
        @next-click="query"
      />
    </template>
  </windows-window>
</template>

<style scoped lang="scss">
.el-tree {
  width: 180px;
}
</style>
